<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/jquery.fullPage.css">
    <style>
        /* img {
            z-index: 100;
            width: 100%;
            height: 100%;
        } */
        
        .section {
            text-align: center;
            color: #fff;
            background: url(./images/1.jpg);
        }
        
        .section h3 {
            font-size: 40px;
        }
        
        .section h4 {
            font-weight: 500;
            font-size: 30px;
        }
        
        .section:nth-child(2) {
            background: url(./images/2.jpg);
        }
        
        .section:nth-child(3) {
            background: url(./images/3.jpg);
        }
        
        .section:nth-child(4) {
            background: url(./images/4.jpg);
        }
    </style>
</head>

<body>
    <div id="dowebok">
        <div class="section">
            <h3>第一屏</h3>
            <h4>fullPage.js — 项目导航演示</h4>

        </div>
        <div class="section">
            <h3>第二屏</h3>
            <h4>请查看右边的圆圈</h4>
        </div>
        <div class="section">
            <h3>第三屏</h3>
            <h4>圆圈还可以设置位置，颜色，加上 tip，点击可以控制</h4>
        </div>
        <div class="section">
            <h3>第四屏</h3>
            <h4>这是最后一屏</h4>
        </div>
    </div>
    <script src="./js/jquery-3.6.0.js"></script>

    <!-- jquery.easings.min.js 用于 easing 参数，也可以使用完整的 jQuery UI 代替，如果不需要设置 easing 参数，可去掉改文件 -->
    <script src="js/jquery.easings.min.js"></script>

    <!-- 如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 -->
    <script src="js/jquery.slimscroll.min.js"></script>

    <script src="js/jquery.fullPage.js"></script>
    <script>
        $(function() {
            $('#dowebok').fullpage({
                "verticalCentered": true,
                "navigation": true,
            });

        });
    </script>
</body>

</html>